<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<head>
	<title>${fns:getConfig('productName')}</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#content-left{
			float:left;width:17em;padding-right:5px;border-right:1px solid #cccccc;
			overflow:auto; 
		}
		#content-right{
			float:left;margin-left:2px;overflow: auto; background:#c0c0c0;
		}
		#content-right .detail{
			display:none;
		}
		#content-right .tab-active {
		   display:block;
		}
		#content-left ul li a{
			background:#fff;color:#000;min-height:3em;
		}
		#content-left ul li a h1{
			font-size:1.5em;text-overflow:clip;
		}
		#content-left ul li a:hover{
		    background:#fff;
		}
		#content-left ul li.ui-btn-active a{
		    background:#ebc12c;color:red;
		}
		#content-right ul li a{
			background:#c0c0c0;color:#000;
		}
		#content-right ul li a:hover{
			background:#ebc12c;
		}
		#content-right ul li.ui-btn-active a{
		    background:#ebc12c;
		}
		#content-right ul li a h1{
			font-size:1.2em;text-overflow:clip;
		}
		#content-right ul li a p{
			text-overflow:clip;white-space: normal;
		}
		.ui-content .ui-listview-inset, .ui-panel-inner .ui-listview-inset {
			margin: 0;
		}
		.ui-content {
			border-width: 0;
			overflow: visible;
			overflow-x: hidden;
			padding: 2px;
		}
		#content-left .ui-listview .ui-li-has-thumb img{
			position: absolute;
			left: 14px;
			top: 3px;
			max-height: 5em;
			max-width: 5em;
		}
		#content-right .ui-listview>.ui-li-has-thumb>.ui-btn { 
			height: 90px;padding-left: 6em;
		}
		#content-right .ui-listview>.ui-li-has-thumb>.ui-btn img {
			height: 105px;width:100px;max-height: 105px;max-width:100px;
			background-size: 80px 80px;
		}
	</style>
	<script type="text/javascript"> 
		$(document).ready(function() {
			$('#content-left ul li').bind('click', function(e) {
				$('#content-left ul li').removeClass('ui-btn-active');
				$(this).addClass('ui-btn-active');
				var id = $(this).find("a").attr('href');
				$('#content-right div').removeClass('tab-active');
				$(id).addClass('tab-active');
				sessionStorage.firstMenuId = this.id;
			});
			$('#content-right ul').delegate('li', 'click', function() {
				sessionStorage.secondMenuId = this.id;
				return true;
			});
			if(sessionStorage.firstMenuId){
				var items = $('#content-left ul li');
				for(var i=0; i<items.length; i++) {
					if(items[i].id == sessionStorage.firstMenuId){
						$(items[i]).click();
					}
				}
			} else {
				$("#content-left ul li:first-child").click();
			}
			if(sessionStorage.secondMenuId){
				var items = $('#content-right ul li');
				for(var i=0; i<items.length; i++) {
					if(items[i].id == sessionStorage.secondMenuId){
						$(items[i]).click().addClass('ui-btn-active');
					}
				}
			} else {
				$("#content-right ul li:first-child").addClass('ui-btn-active');
			}
			$(window).on("orientationchange",function(e){
				//延迟处理，解决android旋转后高度没有更改的问题
				setTimeout("setRange()",500);
			});
			$(window).resize(function() {
				setRange(); 
			});
			setRange();	
			sessionStorage.removeItem("parentPageNo");
			localStorage.sessionId = "${sessionId}";
		});
		function setRange() {
			var height = $(window).height() - $(header).height()*2-8;
			$("#content-left").height(height);
			$("#content-right").height(height);
			var width = $(window).width()-$("#content-left").width()-15;
			$("#content-right").width(width);
		}
	</script>
</head>
<body>
       <article data-role="content">
      	<c:set var="menuList" value="${fns:getMenuList()}"/>
        <aside id="content-left">
            <ul data-role="listview" data-inset="true">
			   <c:forEach items="${menuList}" var="menu" varStatus="idxStatus">
            		<c:if test="${menu.parent.id eq 1 && menu.isShow eq 1}">
	            		<li id="${menu.id}">
	            			<a href="#tab-${menu.id}">
					       		<img src="${ctxStatic}/images/menu/${menu.name}.png">
					        	<h1>${menu.name}</h1>
					        </a>
				   		</li>
			   		</c:if>
			   	</c:forEach>
			</ul>
		</aside>
		<section id="content-right">
			<c:set var="loginName" value="${fns:getStore().loginName}"/>
			<c:forEach items="${menuList}" var="menu" varStatus="idxStatus">
           		<c:if test="${menu.parent.id eq 1 && menu.isShow eq 1}">
            		<div id="tab-${menu.id}" class="detail">
            			<ul data-role="listview" data-inset="true">
            				<c:forEach items="${menu.childList}" var="child">
           						<c:if test="${fn:contains(menuList, child) && child.isShow eq 1}">
	           						<c:if test="${loginName == 'developer'}">
			            				<li id="${child.id}">
			            					<a onclick="location.href='${ctx}${child.href}'">
									        	<img src="${ctxStatic}/images/menu/子模块图标.png">
									       	 	<h1>${child.name}</h1>
									        	<p>${child.description}</p>
									        </a>
									    </li>
	           						</c:if>
	            					<c:if test="${loginName != 'developer' && child.id != 144 && child.id !=10}">
			            				<li id="${child.id}">
			            					<a onclick="location.href='${ctx}${child.href}'">
									        	<img src="${ctxStatic}/images/menu/子模块图标.png">
									       	 	<h1>${child.name}</h1>
									        	<p>${child.description}</p>
									        </a>
									    </li>
	            					</c:if>
            					</c:if>
						    </c:forEach>
						</ul>
					</div>
				</c:if>
           	</c:forEach>
		 </section>
       </article>
</body>
</html>
